<template>
  <div class="findpwd">
    <h3>找回密码</h3>
    <div>
      <input v-model="formData.phone" type="text" placeholder="手机号码" />
    </div>
    <div>
      <input v-model="formData.password" type="password" placeholder="密码" />
    </div>
    <div>
      <input v-model="formData.nickname" type="text" placeholder="昵称" value="小明"/>
    </div>
    <div>
      <input v-model="formData.captcha" type="text" placeholder="验证码" /> 
      <button @click="sendCaptchaFn">发送验证码</button>
    </div>
    <div>
      <button @click="modifyPwdFn">保存修改</button>
    </div>
    <div>
        <router-link to="/login">去登录</router-link>
    </div>
  </div>
</template>

<script>
// 导入网络接口
import { sendCaptcha , modifyPwd } from '@/api/index'

export default {
    data(){
        return {
            formData: {
                captcha: '',
                phone: '',
                password: '',
                nickname: ''
            }
        }
    },

    methods: {
        // 发送验证码
        async sendCaptchaFn(){
            let phone = this.formData.phone;
            console.log("phone:",phone)
            if(/^1[3-9]\d{9}$/.test(phone)){
                // 调用接口
                await sendCaptcha({phone}).then(
                    content=> {
                        console.log("提示:",content)
                        let {code} = content;
                        if(code == 200) {
                            alert('发送手机验证码成功');
                        }
                    }
                )
            }
            else {
                alert('请珍惜接口调用次数.');
            }
        },
        // 修改密码接口
        async modifyPwdFn(){
            console.log(this.formData)
            let {
                captcha,
                phone,
                password,
                nickname
            } = this.formData;
            if(password.length == 0 || nickname.length == 0 ||captcha.length == 0 || phone.length == 0 ) {
                alert('输入框不能为空!')
                return false;
            }
            // 修改密码
            await modifyPwd({
                captcha,
                phone,
                password,
                nickname
            })
            .then(
                content=> {
                    console.log("修改结果:",content)
                }
            )
        }

    }
}


</script>

<style lang="less">
.findpwd {
  padding: 10px 24px;
  > div {
    width: 100%;
    margin-top: 10px;
    input {
      height: 40px;
      padding-left: 10px;
      font-size: 16px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    button {
      height: 40px;
      font-size: 16px;
      padding: 0 5px;
      vertical-align: middle;
    }
  }
}
</style>